<template>
  <div class="admin-layout">
    <!-- 左侧抽屉菜单 -->
    <aside class="admin-sidebar" :class="{ 'sidebar-open': sidebarOpen }">
      <div class="sidebar-header">
        <h2 class="sidebar-title">speeded fly people</h2>
       
       
      </div>
      <nav class="sidebar-nav">
        <ul class="nav-list">
          <li class="nav-item">
            <a href="#/admin-dashboard" class="nav-link">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3 13H21V11H3V13ZM3 6H21V8H3V6ZM3 18H21V20H3V18Z" fill="white"/>
              </svg>
              <span>仪表盘</span>
            </a>
          </li>
          <li class="nav-item">
            <a href="#/admin-products" class="nav-link">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 6L12 12M12 16L12 22M4.93 4.93L6.34 6.34M17.66 17.66L19.07 19.07M2 12H4M20 12H22M4.93 19.07L6.34 17.66M17.66 6.34L19.07 4.93" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              <span>产品管理</span>
            </a>
          </li>
          <li class="nav-item">
            <a href="#/admin-orders" class="nav-link">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 8V12L15 15M5 20H19C19.55 20 20 19.55 20 19V7C20 6.45 19.55 6 19 6H5C4.45 6 4 6.45 4 7V19C4 19.55 4.45 20 5 20Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              <span>订单管理</span>
            </a>
          </li>
          <li class="nav-item">
            <a href="#/admin-customers" class="nav-link">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H11C9.93913 15 8.92172 15.4214 8.17157 16.1716C7.42143 16.9217 7 17.9391 7 19V21" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M9 7H7C5.89543 7 5 7.89543 5 9V11C5 12.1046 5.89543 13 7 13H9" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M15 7H17C18.1046 7 19 7.89543 19 9V11C19 12.1046 18.1046 13 17 13H15" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <circle cx="12" cy="17" r="3" stroke="white" stroke-width="2"/>
              </svg>
              <span>客户管理</span>
            </a>
          </li>
          <li class="nav-item">
            <a href="#/admin-news" class="nav-link">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M21 16V8C21 6.89543 20.1046 6 19 6H5C3.89543 6 3 6.89543 3 8V16C3 17.1046 3.89543 18 5 18H19C20.1046 18 21 17.1046 21 16Z" stroke="white" stroke-width="2"/>
                <path d="M16 3V5" stroke="white" stroke-width="2" stroke-linecap="round"/>
                <path d="M8 3V5" stroke="white" stroke-width="2" stroke-linecap="round"/>
                <path d="M3 11H21" stroke="white" stroke-width="2" stroke-linecap="round"/>
              </svg>
              <span>新闻管理</span>
            </a>
          </li>
          <li class="nav-item">
            <a href="#/admin-reviews" class="nav-link">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M22 10V16C22 17.1046 21.1046 18 20 18H18C17.4477 18 17 18.4477 17 19C17 19.5523 17.4477 20 18 20H21C22.1046 20 23 19.1046 23 18V11C23 9.89543 22.1046 9 21 9H19C18.4477 9 18 8.55228 18 8C18 7.44772 18.4477 7 19 7H22" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M2 18H14C15.1046 18 16 17.1046 16 16V8C16 6.89543 15.1046 6 14 6H2C0.895431 6 0 6.89543 0 8V16C0 17.1046 0.895431 18 2 18Z" stroke="white" stroke-width="2"/>
              </svg>
              <span>评论管理</span>
            </a>
          </li>
          <li class="nav-item">
            <a href="#/admin-carousel" class="nav-link">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M21 16V8C21 6.89543 20.1046 6 19 6H5C3.89543 6 3 6.89543 3 8V16C3 17.1046 3.89543 18 5 18H19C20.1046 18 21 17.1046 21 16Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M8.5 16C9.32843 16 10 15.3284 10 14.5C10 13.6716 9.32843 13 8.5 13C7.67157 13 7 13.6716 7 14.5C7 15.3284 7.67157 16 8.5 16Z" fill="white" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M16.5 16C17.3284 16 18 15.3284 18 14.5C18 13.6716 17.3284 13 16.5 13C15.6716 13 15 13.6716 15 14.5C15 15.3284 15.6716 16 16.5 16Z" fill="white" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              <span>轮播图管理</span>
            </a>
          </li>
          <li class="nav-item">
            <a href="#/admin-company" class="nav-link">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M16 7H21M4 7H9M1 12H23M3 17H21" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              <span>企业管理</span>
            </a>
          </li>
          <li class="nav-item">
            <a href="#/admin-settings" class="nav-link">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="white" stroke-width="2"/>
                <path d="M19.4 15C19.2501 15.7144 19.0417 16.3979 18.7831 17.0443C18.5244 17.6907 18.2197 18.2942 17.8756 18.8484C17.5316 19.4026 17.1518 19.9022 16.7416 20.3412C16.3314 20.7802 15.8942 21.1543 15.4355 21.4567C14.9767 21.7591 14.4999 22.0 14 22.0" stroke="white" stroke-width="2"/>
                <path d="M14.31 9.09C14.7447 8.58515 15.115 8.05432 15.4247 7.50564C15.7343 6.95697 15.9786 6.39391 16.153 5.8206C16.3274 5.24729 16.4278 4.6662 16.4507 4.08188C16.4736 3.49756 16.4187 2.91333 16.2871 2.33542C16.1555 1.7575 15.9488 1.19124 15.6702 0.64209C15.3916 0.0929392 15.0434 -0.434818 14.6337 -0.919409C14.224 -1.40399 13.7577 -1.83116 13.244 -2.19372C12.7303 -2.55629 12.176 -2.85078 11.59 -3.07124C10.0389 -3.57228 8.3122 1.28188 11.59 3.07124C12.176 3.29171 12.7303 3.5862 13.244 3.94876C13.7577 4.31132 14.224 4.73849 14.6337 5.22308C14.789 5.44838 14.9332 5.68896 15.0649 5.94311" stroke="white" stroke-width="2"/>
                <path d="M4.69 9.09C4.54013 9.80442 4.33171 10.4879 4.0731 11.1343C3.81448 11.7807 3.50975 12.3842 3.16564 12.9384C2.82153 13.4926 2.44178 13.9922 2.03159 14.4312C1.62139 14.8702 1.18421 15.2443 0.72547 15.5467C0.26673 15.8491 -0.190047 16.1 0.3 16.1" stroke="white" stroke-width="2"/>
              </svg>
              <span>系统设置</span>
            </a>
          </li>
        </ul>
      </nav>
    </aside>

    <!-- 主内容区域 -->
    <main class="admin-content" :class="{ 'content-expanded': sidebarOpen }">
      <header class="admin-header">
        <div class="header-left">
          <button class="sidebar-toggle" @click="toggleSidebar">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3 12H21M3 6H21M3 18H21" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
        </div>
        <div class="header-right">
          <div class="user-profile" @click="toggleUserMenu">
            <div class="user-info">
              <span class="user-name">管理员</span>
            </div>
            <!-- 用户下拉菜单 -->
            <div v-if="userMenuOpen" class="user-dropdown">
              <button class="dropdown-item" @click.stop="showProfileEdit">
                编辑资料
              </button>
              <button class="dropdown-item logout" @click.stop="logout">
                退出登录
              </button>
            </div>
          </div>
        </div>
      </header>
      <div class="content-wrapper">
        <slot></slot>
      </div>
    </main>

    <!-- 管理员资料编辑弹窗 -->
    <div v-if="showProfileModal" class="modal-overlay" @click="closeProfileModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>编辑管理员资料</h3>
          <button class="close-button" @click="closeProfileModal">×</button>
        </div>
        <div class="modal-body">
          <form @submit.prevent="saveProfile">
            <div class="form-group">
              <label>用户名 *</label>
              <input type="text" v-model="currentAdmin.username" required placeholder="请输入用户名"/>
            </div>
            <div class="form-group">
              <label>新密码（留空不修改）</label>
              <input type="password" v-model="currentAdmin.password" placeholder="请输入新密码"/>
            </div>
            <div class="form-actions">
              <button type="button" class="cancel-button" @click="closeProfileModal">取消</button>
              <button type="submit" class="save-button">保存</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AdminLayout',
  data() {
      return {
        userMenuOpen: false,
        showProfileModal: false,
        sidebarOpen: false,
        currentAdmin: {
          username: 'admin',
          password: ''
        }
      }
    },
  methods: {
      logout() {
        if (confirm('确定要退出登录吗？')) {
          // 清除登录状态
          localStorage.removeItem('isLoggedIn');
          localStorage.removeItem('currentAdmin');
          // 重定向到登录页面
          this.$router.push('/admin-login');
        }
      },
      toggleUserMenu() {
        this.userMenuOpen = !this.userMenuOpen;
      },
      showProfileEdit() {
        // 加载当前管理员信息
        const savedAdmin = localStorage.getItem('currentAdmin');
        if (savedAdmin) {
          this.currentAdmin = { ...JSON.parse(savedAdmin) };
        } else {
          this.currentAdmin = {
            username: 'admin',
            password: ''
          };
        }
        this.showProfileModal = true;
        this.userMenuOpen = false;
      },
      closeProfileModal() {
        this.showProfileModal = false;
        this.currentAdmin.password = '';
      },
      saveProfile() {
        // 保存管理员信息到localStorage
        const adminData = {
          username: this.currentAdmin.username
        };
        
        // 如果输入了密码，则更新密码
        if (this.currentAdmin.password) {
          adminData.password = this.currentAdmin.password; // 实际应用中应该加密密码
        }
        
        localStorage.setItem('currentAdmin', JSON.stringify(adminData));
        this.closeProfileModal();
        alert('管理员资料已保存');
      },
      closeUserMenuOnOutsideClick(event) {
        // 点击页面其他地方关闭用户菜单
        const userProfileElement = this.$el.querySelector('.user-profile');
        if (userProfileElement && !userProfileElement.contains(event.target)) {
          this.userMenuOpen = false;
        }
      },
      toggleSidebar() {
        this.sidebarOpen = !this.sidebarOpen;
      }
    },
  mounted() {
    // 点击页面其他地方关闭用户菜单
    document.addEventListener('click', this.closeUserMenuOnOutsideClick);
    // 确保全屏显示
    document.body.style.margin = '0';
    document.body.style.padding = '0';
  },
  destroyed() {
    // 清理事件监听器
    document.removeEventListener('click', this.closeUserMenuOnOutsideClick);
  }
}
</script>

<style scoped>
/* 全局样式重置 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 基本布局 */
.admin-layout {
  display: flex;
  height: 100vh;
  width: 100vw;
  background-color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  overflow: hidden;
}

/* 侧边栏样式 */
.admin-sidebar {
  width: 0;
  height: 100vh;
  background: linear-gradient(180deg, #1a73e8 0%, #0d47a1 100%);
  color: white;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  overflow-x: hidden;
  transition: all 0.3s ease;
  border-right: none;
}

.admin-sidebar.sidebar-open {
  width: 179px;
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.close-sidebar-btn {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 5px;
  display: none;
}

.admin-sidebar.sidebar-open .close-sidebar-btn {
  display: block;
}

.sidebar-nav {
  padding: 20px 0;
}

.nav-list {
  list-style: none;
  padding: 0;
}

.nav-item {
  margin-bottom: 5px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 20px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
}

.nav-item.active .nav-link {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
}

/* 主内容区域 */
.admin-content {
  flex: 1;
  height: 100vh;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  margin-left: 0;
}

.admin-content.content-expanded {
  margin-left: 179px;
}

/* 头部样式 */
.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background-color: #ffffff;
  border-bottom: 1px solid #e8e8e8;
  height: 60px;
}

.header-left {
  display: flex;
  align-items: center;
}

.sidebar-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  color: #333;
  transition: all 0.3s ease;
}

.sidebar-toggle:hover {
  background-color: #f5f5f5;
  border-radius: 4px;
}

.header-right {
  display: flex;
  align-items: center;
}

/* 用户信息和下拉菜单样式 */
.user-profile {
  position: relative;
  cursor: pointer;
  padding: 10px;
}

.user-info {
  display: flex;
  align-items: center;
}

.user-name {
  font-size: 14px;
  font-weight: 500;
  color: #333333;
}

.user-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 5px;
  min-width: 120px;
  background-color: #ffffff;
  border: 1px solid #e8e8e8;
  overflow: hidden;
  z-index: 100;
}

.dropdown-item {
  width: 100%;
  padding: 10px 15px;
  background: none;
  border: none;
  color: #333333;
  text-align: left;
  cursor: pointer;
  font-size: 14px;
}

.dropdown-item:hover {
  background-color: #f5f5f5;
}

.dropdown-item.logout {
  color: #ff4d4f;
}

/* 内容包装器 */
.content-wrapper {
  flex: 1;
  overflow: auto;
  background-color: #ffffff;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background-color: #ffffff;
  border-radius: 4px;
  width: 400px;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-header {
  padding: 15px;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.close-button {
  background: none;
  border: none;
  font-size: 24px;
  color: #666666;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
}

.modal-body {
  padding: 15px;
}

/* 表单样式 */
.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 500;
  color: #333333;
}

.form-group input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  background-color: white;
  color: #333333;
  font-size: 14px;
}

.form-group input:focus {
  outline: none;
  border-color: #1890ff;
}

/* 表单操作按钮 */
.form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}

.cancel-button {
  padding: 8px 16px;
  background-color: transparent;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  color: #333333;
  font-size: 14px;
  cursor: pointer;
}

.save-button {
  padding: 8px 16px;
  background-color: #1890ff;
  border: none;
  border-radius: 4px;
  color: white;
  font-size: 14px;
  cursor: pointer;
}

/* 横屏适配 - 确保全屏无空白 */
@media (min-width: 1024px) {
  .admin-layout {
    min-height: 100vh;
  }
}
</style>